<div data-hook="admin_stock_locations_form_fields" class="row">
  <div class="col-xs-7" data-hook="stock_location_names">
    <div data-hook="stock_location_name">
      <%= f.field_container :name do %>
        <%= f.label :name, class: 'required' %><br />
        <%= f.text_field :name, class: 'fullwidth', required: true %>
      <% end %>
    </div>
    <div data-hook="stock_location_code">
      <%= f.field_container :code do %>
        <%= f.label :code %>
        <%= f.text_field :code, :class => 'fullwidth', :label => false %>
      <% end %>
    </div>
    <div data-hook="stock_location_admin_name">
      <%= f.field_container :admin_name do %>
        <%= f.label :admin_name %>
        <%= f.text_field :admin_name, class: 'fullwidth', label: false %>
      <% end %>
    </div>
  </div>

  <div class="col-xs-3" data-hook="stock_location_status">
    <%= f.field_container :active do %>
      <label for="active"><%= Spree.t(:status) %></label>
      <ul>
        <li class="fullwidth" data-hook="stock_location_active">
          <%= f.check_box :active %>
          <%= f.label :active %>
        </li>
        <li class="fullwidth" data-hook="stock_location_default">
          <%= f.check_box :default %>
          <%= f.label :default %>
        </li>
        <li class="fullwidth" data-hook="stock_location_backorderable_default">
          <%= f.check_box :backorderable_default %>
          <%= f.label :backorderable_default %>
        </li>
        <li class="fullwidth" data-hook="stock_location_propagate_all_variants">
          <%= f.check_box :propagate_all_variants %>
          <%= f.label :propagate_all_variants %>
        </li>
        <li class="fullwidth">
          <%= f.check_box :restock_inventory %>
          <%= f.label :restock_inventory %>
        </li>
        <li>
          <%= f.check_box :fulfillable %>
          <%= f.label :fulfillable %>
        </li>
        <li class="fullwidth">
          <%= f.check_box :check_stock_on_transfer %>
          <%= f.label :check_stock_on_transfer %>
        </li>
      </ul>
    <% end %>
  </div>

  <div class="col-xs-5" data-hook="stock_location_address1">
    <div class="field">
      <%= f.label :address1 %>
      <%= f.text_field :address1, class: 'fullwidth' %>
    </div>
  </div>

  <div class="col-xs-5" data-hook="stock_location_city">
    <div class="field">
      <%= f.label :city %>
      <%= f.text_field :city, class: 'fullwidth' %>
    </div>
  </div>

  <div class="col-xs-5" data-hook="stock_location_address2">
    <div class="field">
      <%= f.label :address2 %>
      <%= f.text_field :address2, class: 'fullwidth' %>
    </div>
  </div>

  <div class="col-xs-2" data-hook="stock_location_zipcode">
    <div class="field">
      <%= f.label :zipcode %>
      <%= f.text_field :zipcode, class: 'fullwidth' %>
    </div>
  </div>

  <div class="col-xs-3" data-hook="stock_location_phone">
    <div class="field">
      <%= f.label :phone %>
      <%= f.phone_field :phone, class: 'fullwidth' %>
    </div>
  </div>

  <div class="col-xs-5" data-hook="stock_location_country">
    <div class="field">
      <%= f.label :country_id %>
      <span id="country"><%= f.collection_select :country_id, available_countries, :id, :name, {}, { class: 'select2 fullwidth' } %></span>
    </div>
  </div>

  <div class="col-xs-5" data-hook="stock_location_state">
    <div class="field">
      <% if f.object.country %>
        <%= f.label :state_id %>
        <span id="state" class="region">
          <%= f.text_field :state_name, style: "display: #{f.object.country.states.empty? ? 'block' : 'none' };", disabled: !f.object.country.states.empty?, class: 'fullwidth state_name' %>
          <%= f.collection_select :state_id, f.object.country.states.sort, :id, :name, { include_blank: true }, {class: 'select2 fullwidth', style: "display: #{f.object.country.states.empty? ? 'none' : 'block' };", disabled: f.object.country.states.empty?} %>
        </span>
      <% end %>
    </div>
  </div>
</div>

<% content_for :head do %>
  <%= javascript_tag do -%>
    $(document).ready(function(){
      $('span#country .select2').on('change', function() { update_state(''); });
    });
  <% end -%>
<% end %>
